<template>
  <div class="programs">
    <!-- 元素设计器 -->
    <fanDesigin :title="'媒体组件'" :elementList="elementList"></fanDesigin>
  </div>
</template>

<script>
export default {
  name: "programs",
  components: {
    fanDesigin: () => import("@/components/fan-design/index.vue"),
  },
  data() {
    return {
      elementList: [
        {
          type: 1,
          name: "文本",
          element: "fan-input",
          elementDesign: "fan-input-design",
          key: "title",
          value: "这是一个文本框",
          isShowLabel: true, // 是否显示label
          isFocus: false, // 是否聚焦
          options: [
            {
              label: "区域",
              children: [
                {
                  label: "x坐标",
                  drop: "x", // 前端用的字段(在组件中作为用来获取当前key的标识)
                  key: "xCor", // 后端用的字段
                  value: 0,
                },
                {
                  label: "y坐标",
                  drop: "y",
                  key: "yCor",
                  value: 0,
                },
                {
                  label: "宽度",
                  drop: "width",
                  key: "width",
                  value: 100,
                },
                {
                  label: "高度",
                  drop: "height",
                  key: "height",
                  value: 23,
                },
              ],
            },
            {
              label: "属性",
              children: [
                {
                  label: "字体",
                  drop: "fontFamily",
                  key: "fontFamily",
                  value: 0,
                  type: "select",
                  options: [
                    {
                      label: "微软雅黑",
                      value: 0,
                    },
                    {
                      label: "宋体",
                      value: 1,
                    },
                  ],
                },
                {
                  label: "字号",
                  drop: "fontSize",
                  key: "fontSize",
                  value: 14,
                },
                {
                  label: "字距",
                  drop: "letterSpacing",
                  key: "letterSpacing",
                  value: 0,
                },
                {
                  label: "行距",
                  drop: "lineHeight",
                  key: "lineHeight",
                  value: 23,
                },
                {
                  label: "位置",
                  drop: "textAlign",
                  key: "textAlign",
                  value: "left",
                  type: "textAlign",
                  options: [{}],
                },
              ],
            },
          ],
        },
        {
          type: 2,
          name: "扩展文本",
        },
        {
          type: 3,
          name: "图片",
        },
        {
          type: 4,
          name: "视频",
        },
        {
          type: 5,
          name: "网页",
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.programs ::v-deep {
  background-color: #fff;
}
</style>
